import React, { Component } from 'react';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, List } from 'antd-mobile'
import { createForm } from 'rc-form';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import ListMixin from 'mixin/list'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends ListMixin {
  constructor(props) {
    super(props);
    this.listApi = '/activity/list';
    this.state = Object.assign({
      city: '',
      categoryId: ''
    }, this.state);
  }

  // componentDidMount(){
  //   this.fetchActivity(1)
  // }

  renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="activity-item">
          <Link to={`/activity/${rowData.activityId}`}>
            <img src={`${imgBaseUrl}${rowData.listImg}`} alt=""/>
            <div className="row-text">
              <div className="t">{rowData.title}</div>
              <div className="b">
                {rowData.createTime}
                <span className="fr">阅读量{rowData.readCount}</span>
              </div>
            </div>
          </Link>
        </div>
      );
  }

  render() {
    const pageData = this.props.languageStore.getPageData('activity');

    const { imgBaseUrl, commonData } = this.props.appStore;
    const cityEn = (commonData.cityEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    const activityTypeEn = (commonData.activityTypeEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    const { isLoading, currentPage, pageCount } = this.state;
    return (
      <div className="activityMsg">
        <Top
          title={pageData.title}
        />
        <div className="activity">
          <div className="filter">
            <Flex>
              <Flex.Item>
                <Picker data={cityEn} cols={1} value={this.state.city} onChange={(value)=>{
                  this.doSearch({city: value[0]});
                  this.setState({
                    city: value
                  });
                }} className="forss">
                  <List.Item arrow="horizontal">城市</List.Item>
                </Picker>
              </Flex.Item>
              <Flex.Item>
                <Picker data={activityTypeEn} value={this.state.categoryId} cols={1} onChange={(value)=>{
                    this.doSearch({categoryId: value[0]});
                    this.setState({
                      categoryId: value
                    });
                  }} className="forss">
                  <List.Item arrow="horizontal">类型</List.Item>
                </Picker>
              </Flex.Item>
            </Flex>
          </div>
          <div className="list">
            <ListView ref="lv"
              dataSource={this.state.dataSource}
              renderFooter={this.renderFooter}
              renderRow={this.renderRow}
              className="fortest"
              pageSize={4}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onScroll={() => { console.log('scroll'); }}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={10}
              stickyHeader
            />
          </div>
        </div>
      </div>
    )
  }
}


module.exports = ModuleName
